<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/mi.css">
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
</head>
<body>

    

    <!-- 黑色导航 start -->
     <div class="black-nav">
        <div class="wrap">
            <ul class="black-nav-left">    
                <li><a href="#">小米官网</a> <span>|</span></li>
                <li><a href="#">小米商城</a> <span>|</span></li>
                <li><a href="#">小米澎湃OS</a> <span>|</span></li>
                <li><a href="#">小米汽车</a> <span>|</span></li>
                <li><a href="#">云服务</a> <span>|</span></li>
                <li><a href="#">loT</a> <span>|</span></li>
                <li><a href="#">有品</a> <span>|</span></li>
                <li><a href="#">小爱开放平台</a> <span>|</span></li>
                <li><a href="#">资质证照</a> <span>|</span></li>
                <li><a href="#">协议规则</a> <span>|</span></li>
                <li>
                    <a href="#">下载app</a>
                     <span>|</span>
                     <div class="download">
                        <img src="./images/download.png" alt="">
                        <p>小米商城app</p>    <!--二维码下方的汉字-->
                     </div>
                     <div class="stri"></div>    <!--二维码上面的白色箭头-->
                    </li>
                <li><a href="#">Select Location</a> <span>|</span></li>
            </ul>
            <ul class="black-nav-right">
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a><span>|</span></li>
                <li class="cart">
                    <a href="#">
                        <i class="iconfont">&#xe607;</i>
                        <i>购物车（0）</i>
                    </a>
                    <div class="cart-list">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </li>
            </ul>
        </div>
     </div>
    <!-- 黑色导航 end-->

    <!-- 白色导航 start -->
     <div class="white-nav">
        <div class="wrap">
            <div class="logo">
                
                <a href="#"><img src="./images/mi-logo2.png" alt="" class="mi-logo"></a>
            </div>
            
        
            <div class="nav-bar">
                <ul>
                    <li>
                        <div class="blank"></div>
                    </li>
                    <li>
                        <a href="#">Xiaomi手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/xiaomi15u.png" alt="">
                                            </div>
                                            <p class="name">Xiaomi 15 Ultra</p>
                                            <p class="price">6499元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/xiaomi15.png" alt="">
                                            </div>
                                            <p class="name">Xiaomi 15</p>
                                            <p class="price">4499元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/xiaomi15pro.png" alt="">
                                            </div>
                                            <p class="name">Xiaomi 15 Pro</p>
                                            <p class="price">5299元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/xiaomi15dz.png" alt="">
                                            </div>
                                            <p class="name">Xiaomi 15 定制版</p>
                                            <p class="price">4999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/xiaomimf4.png" alt="">
                                            </div>
                                            <p class="name">Xiaomi MIX Fold 4</p>
                                            <p class="price">8999元起</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/xiaomimf.png" alt="">
                                            </div>
                                            <p class="name">Xiaomi MIX Flip</p>
                                            <p class="price">5999元起</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">REDMI手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="Xiaomi 15 Ultra">
                <button class="iconfont">&#xe63d;</button>
            </div>
        </div>
     </div>
    <!-- 白色导航 end -->

 <!-- Banner start -->
 <div class="banner">
    <div class="wrap">
        <img class="banner-img" src="./images/banner.jpg" alt="">
        <div class="slide">
            <ul>
                <li class="slide-phone">
                    <a href="#">手机<i class="iconfont">&#xe621;</i></a>
                    <div class="slide-list">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="./images/xiaomiszqj.png" alt="">
                                    <span>Xiaomi 数字旗舰</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/xiaomimixxl.png" alt="">
                                    <span>Xiaomi MIX系列</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/xiaomicvxl.png" alt="">
                                    <span>Xiaomi Civi系列</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/redmikxl.png" alt="">
                                    <span>Redmi K系列</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/redmitxl.png" alt="">
                                    <span>Redmi Turbo系列</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/redminxl.png" alt="">
                                    <span>Redmi Note系列</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="./images/redmiszxl.png" alt="">
                                    <span>Redmi 数字系列</span>
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                </li>
                <li><a href="#">电视<i class="iconfont">&#xe621;</i></a></li>
                <li><a href="#">家电<i class="iconfont">&#xe621;</i></a></li>
                <li><a href="#">笔记本 平板 显示器<i class="iconfont">&#xe621;</i></a></li>
                <li><a href="#">出行 穿戴<i class="iconfont">&#xe621;</i></a></li>
                <li><a href="#">耳机 音箱<i class="iconfont">&#xe621;</i></a></li>
                <li><a href="#">健康 儿童<i class="iconfont">&#xe621;</i></a></li>
                <li><a href="#">生活 箱包<i class="iconfont">&#xe621;</i></a></li>
                <li><a href="#">智能 路由器<i class="iconfont">&#xe621;</i></a></li>
                <li><a href="#">电源 配件<i class="iconfont">&#xe621;</i></a></li>
            </ul>
        </div>
    </div>
 </div>
<!-- Banner end -->

<!-- 广告模块 start -->

<div class="ad">
    <div class="wrap">
        <div class="ad-slide">
            <ul>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe733;</i>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe733;</i>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe733;</i>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe733;</i>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe733;</i>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="iconfont">&#xe733;</i>
                        <p>米粉卡</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="ad-img">
            <a href="#"><img src="./images/ad1.jpg" alt=""></a>
        </div>
        <div class="ad-img">
            <a href="#"><img src="./images/ad2.jpg" alt=""></a>
        </div>
        <div class="ad-img">
            <a href="#"><img src="./images/ad3.jpg" alt=""></a>
        </div>
    </div>
</div>

<div class="ad2">
    <div class="wrap">
        <img src="./images/ad-b0.jpg" alt="">
    </div>
</div>

<!-- 广告模块 end -->

<!-- 内容模块 start -->

<div class="content">
    <div class="wrap">
        <!-- 手机模块 start-->
         <div class="phone">
            <div class="phone-title">
                <h3 class="title">手机</h3>
            <a class="title-right" href="#">查看更多 <i class="iconfont">&#xe658;</i></a>
            </div>
            <div class="phone-box">
                <div class="phone-box-left">
                    <a href="#">
                        <img src="./images/phone_left.jpg" alt="">
                    </a>
                </div>
                <div class="phone-box-right">
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right1.jpg" alt="">
                            <p class="item-name">Xiaomi 15 Ultra</p>
                            <p class="item-desc">徕卡1英寸主摄 | 徕卡2亿超级长焦 | 徕...</p>
                            <p class="item-pric">6499元起</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right2.jpg" alt="">
                            <p class="item-name">REDMI Turbo 4</p>
                            <p class="item-desc">REDMI Turbo 4 好看又能打</p>
                            <p class="item-pric">1999元起</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right3.jpg" alt="">
                            <p class="item-name">Redmi 14C</p>
                            <p class="item-desc">【持久续航】5160mAh 大电池</p>
                            <p class="item-pric">499元起</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right4.jpg" alt="">
                            <p class="item-name">REDMI K80 Pro</p>
                            <p class="item-desc">骁龙8至尊版|2K新国屏|全焦段影像</p>
                            <p class="item-pric">3699元起</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right5.jpg" alt="">
                            <p class="item-name">REDMI K80</p>
                            <p class="item-desc">第三代骁龙8|2K新国屏|6550mAh 超...</p>
                            <p class="item-pric">2499元起</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right6.jpg" alt="">
                            <p class="item-name">Xiaomi 15</p>
                            <p class="item-desc">徕卡光学 Summilux 高速镜头 | 骁龙...</p>
                            <p class="item-pric">4499元起</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right7.jpg" alt="">
                            <p class="item-name">Xiaomi 15 Pro</p>
                            <p class="item-desc">徕卡光学 Summilux 高速镜头丨骁龙...</p>
                            <p class="item-pric">5299元起</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right8.jpg" alt="">
                            <p class="item-name">Xiaomi 15 定制版</p>
                            <p class="item-desc">卡光学 Summilux 高速镜头丨骁龙8...</p>
                            <p class="item-pric">4999元起</p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="./images/phone-right1.jpg" alt="">
                            <p class="item-name">Xiaomi 15 Ultra</p>
                            <p class="item-desc">徕卡1英寸主摄 | 徕卡2亿超级长焦 | 徕... </p>
                            <p class="item-pric">6499元起</p>
                        </a>
                    </div>
                </div>
            </div>
         </div>
        <!-- 手机模块 end-->

    </div>
</div>

<!-- 内容模块 end -->

</body>
</html>